<template>
  <view class="UserInfo animate__animated animate__bounceIn">
    <view class="userBox">
      <view class="avatar">
        <image :src="userDetail.avatar" class="avatarImg"></image>
      </view>
      <view class="content">
        <view
          class="contentItem"
          v-for="item in filterDetailList"
          :key="item.id"
        >
          <text class="title">{{ item.text }} :</text>
          <text v-if="item.copy">********</text>
          <text v-else>{{ item.content }}</text>
          <image
            class="icon"
            src="../../static/icons/document.png"
            v-if="item.copy"
            @click="handleChooseCopy(item.id)"
          ></image>
        </view>
      </view>
      <view class="close" @click="sendCloseMask">x</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "UserIntro",
  props: {
    userDetail: Object,
  },
  data() {
    return {
      show: false,
      studentInfo: [
        {
          id: 1,
          text: "学校",
          content: "",
          copy: false,
        },
        {
          id: 2,
          text: "校区",
          content: "",
          copy: false,
        },
        {
          id: 3,
          text: "年级",
          content: "",
          copy: false,
        },
        {
          id: 4,
          text: "班级",
          content: "",
          copy: false,
        },
        {
          id: 5,
          text: "企鹅",
          content: "",
          copy: true,
        },
        {
          id: 6,
          text: "微信",
          content: "",
          copy: true,
        },
      ],
    };
  },

  computed: {
    filterDetailList() {
      return this.studentInfo.filter((item) => item.content.length);
    },
  },
  // 监听传来的userDetail来动态设置studentInfo
  watch: {
    userDetail(newValue) {
      this.studentInfo[0].content = newValue.school;
      this.studentInfo[1].content = newValue.area;
      this.studentInfo[2].content = newValue.grade;
      this.studentInfo[3].content = newValue.cls;
      this.studentInfo[4].content = newValue.qq;
      this.studentInfo[5].content = newValue.wx;
    },
  },

  methods: {
    sendCloseMask() {
      this.$emit("sendCloseMask");
    },
    handleChooseCopy(id) {
      const data = this.studentInfo[id - 1].content;
      console.log("选择复制个人信息");
      wx.setClipboardData({
        data,
        success(res) {
          console.log("成功复制");
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.UserInfo {
  .userBox {
    position: relative;
    padding: 20rpx;
    padding-top: 60rpx;
    box-sizing: border-box;
    width: 400rpx;
    background-color: #fff;
    border-radius: 15rpx;
    box-shadow: -2px -2px 3px rgba(0, 0, 0, 0.2) inset,
      2px 2px 3px rgba(0, 0, 0, 0.2) inset;
    .avatar {
      position: absolute;
      left: 40rpx;
      top: -30rpx;
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      border: 4rpx solid #fff;
      overflow: hidden;
      .avatarImg {
        width: 100%;
        height: 100%;
      }
    }
    .content {
      display: flex;
      flex-direction: column;
      .contentItem {
        font-size: 26rpx;
        margin: 10rpx 20rpx;
        color: gray;
        position: relative;
        .title {
          margin-right: 15rpx;
        }
        .icon {
          position: absolute;
          right: -15rpx;
          width: 35rpx;
          height: 38rpx;
        }
      }
    }
    .close {
      position: absolute;
      right: 30rpx;
      top: -10rpx;
      font-size: 50rpx;
      color: gray;
    }
  }
}
</style>
